<!--  
 +---------------------------------------------------------------------- 
 | 狂团[kt8.cn]旗下KtAdmin是为独立版SAAS系统而生的快速开发框架. 
 +---------------------------------------------------------------------- 
 | [KtAdmin] Copyright (c) 2022 http://ktadmin.cn All rights reserved. 
 +---------------------------------------------------------------------- 
 | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) 
 +----------------------------------------------------------------------  
-->

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { postSystemBaiduai, postSystemBaiduset, postSystemTencent,postSystemTencentset,postSystemAliyun,postSystemAliyunset } from '@/api'
import bottomCopyringht from '../../../components/bottom-copyright.vue'
let form1 = reactive({
	appid:'',
	apikey:'',
	secretkey:''
})
let form2 = reactive({
	secret_id:'',
	secret_key:'',
})
let form3 = reactive({
	accesskey_id:'',
	accesskey_secret:'',
	region:'cn-shanghai',
})

const token = ref(JSON.parse(localStorage.agenttoken).data)
const ruleFormRef1 = ref()
const ruleFormRef2 = ref()
const ruleFormRef3 = ref()

const submitForm1 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			form1.appid+=''
			postSystemBaiduset(form1).then((res) => {
				console.log(res)
				ElMessage({ message: '保存成功', type: 'success' })
			})
		} else {
			console.log('error submit!', fields)
			ElMessage({ message: '保存失败', type: 'error' })
		}
	})
}

const submitForm2 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			postSystemTencentset(form2).then((res) => {
				ElMessage({ message: '保存成功', type: 'success' })
				getList()
			})
		} else {
			ElMessage({ message: '保存失败', type: 'error' })
		}
	})
}

const submitForm3 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			postSystemAliyunset(form3).then((res) => {
				console.log(res)
				ElMessage({ message: '保存成功', type: 'success' })
				getList()
			})
		} else {
			ElMessage({ message: '保存失败', type: 'error' })
		}
	})
}

const resetForm1 = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
	console.log('77')
}

const rules = reactive({
	appid: [{ required: true, message: '请输入appid', trigger: 'blur' }],
	apikey: [{ required: true, message: '请输入apikey', trigger: 'blur' }],
	secretkey: [{ required: true, message: '请输入secretkey', trigger: 'blur' }],
})
const rules1 = reactive({
	secret_id: [{ required: true, message: '请输入secret_id', trigger: 'blur' }],
	secret_key: [{ required: true, message: '请输入secret_key', trigger: 'blur' }],
	
})
const rules2 = reactive({
	accesskey_id: [{ required: true, message: '请输入accesskey_id', trigger: 'blur' }],
	accesskey_secret: [{ required: true, message: '请输入accesskey_secret', trigger: 'blur' }],
	region: [{ required: true, message: '请输入域名所在地', trigger: 'blur' }],
})

const list = reactive(['百度文本审核', '腾讯语音转文字', '阿里文字转语音'])
const currentIndex = ref(0)
const module = ref('站点设置')
const change = (index, item) => {
	currentIndex.value = index
	getList()
}
// 上传
const imageUrl = ''

const handleAvatarSuccess = (response, uploadFile) => {
	console.log(response, uploadFile)
	if (response.status == 'success') {
		imgurl.logo = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccessdenglu = (response, uploadFile) => {
	// imgurl.denglu = response.data
	if (response.status == 'success') {
		imgurl.denglu = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccesspc = (response, uploadFile) => {
	if (response.status == 'success') {
		imgurl.pc_denglu = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccesskefu = (response, uploadFile) => {
	if (response.status == 'success') {
		imgurl.kefu_img = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccessgong = (response, uploadFile) => {
	if (response.status == 'success') {
		imgurl.gong_img = response.data
	} else {
		ElMessage.error(response.msg)
	}
}

const beforeAvatarUpload = (rawFile) => {
	console.log(rawFile.type)
	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
		ElMessage.error('上传格式必须为.jpg,.png,.gif格式!')
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!')
		return false
	}
	return true
}
// 获取数据
const getList = async() => {
	let r
	if(currentIndex.value==0){
		let r = await postSystemBaiduai()
		form1 = Object.assign(form1,r.data)
	}else if(currentIndex.value==1){
		let r = await postSystemTencent()
		form2 = Object.assign(form2,r.data)
	}else if(currentIndex.value==2){
		let r = await postSystemAliyun()
		form3 = Object.assign(form3,r.data)
	}
	
	
}
onMounted(() => {
	getList()
})
</script>
<template>
	<div style="min-height: 700px">
		<div class="topTabStyle">
			<div class="tabStyleChild">
				<div :class="{ tabSelect: index === currentIndex }" v-for="(item, index) in list" @click="change(index, item)">
					{{ item }}
				</div>
			</div>
			<div v-if="currentIndex == 0" class="cardContent">
				<div class="cardTabTop">
					<div class="cardTabTop1"></div>
					<div class="cardTabTop2">{{list[currentIndex]}}设置</div>
				</div>
				<div class="cardFormStyle">
					<el-form :rules="rules" ref="ruleFormRef1" :model="form1" label-width="120px" style="margin-top: -5px">
						<el-form-item label="appid " prop="appid">
							<el-input v-model="form1.appid" />
						</el-form-item>
						<el-form-item label="apikey " prop="apikey">
							<el-input v-model="form1.apikey" />
						</el-form-item>
						<el-form-item label="secretkey " prop="secretkey">
							<el-input v-model="form1.secretkey" />
						</el-form-item>
					
					</el-form>
				</div>
			</div>
			<div v-else-if="currentIndex == 1" class="cardContent">
				<div class="cardTabTop">
					<div class="cardTabTop1"></div>
					<div class="cardTabTop2">{{list[currentIndex]}}设置</div>
				</div>

				<div class="cardFormStyle">
				<el-form
					:rules="rules1"
					ref="ruleFormRef2"
					:model="form2"
					label-width="120px"
					
				>
				<el-form-item label="secret_id " prop="secret_id">
							<el-input v-model="form2.secret_id" />
						</el-form-item>
						<el-form-item label="secret_key " prop="secret_key">
							<el-input v-model="form2.secret_key" />
						</el-form-item>

				</el-form>
			</div>
			</div>

			<div v-if="currentIndex == 2" class="cardContent">
				<div class="cardTabTop">
					<div class="cardTabTop1"></div>
					<div class="cardTabTop2">{{list[currentIndex]}}设置</div>
				</div>
				<div class="cardFormStyle">
					<el-form :rules="rules2" ref="ruleFormRef3" :model="form3" label-width="120px">
						<el-form-item label="accesskey_id " props="accesskey_id">
							<el-input v-model="form3.accesskey_id" />
						</el-form-item>

						<el-form-item label="accesskey_secret " props="accesskey_secret">
							<el-input v-model="form3.accesskey_secret" />
						</el-form-item>

						<el-form-item label="域名(Endpoint) " props="region">
							<el-input v-model="form3.region" />
						</el-form-item>

						
					</el-form>
				</div>
			</div>

			<!-- 按钮 -->
			<div></div>
		</div>
		<div class="bottomButton" v-if="currentIndex==0">
			<el-button type="primary" @click="submitForm1(ruleFormRef1)">保存</el-button>
		</div>
		<div class="bottomButton" v-else-if="currentIndex==1">
			<el-button type="primary" @click="submitForm2(ruleFormRef2)">保存</el-button>
		</div>
		<div class="bottomButton" v-else-if="currentIndex==2">
			<el-button type="primary" @click="submitForm3(ruleFormRef3)">保存</el-button>
		</div>
	</div>
	<bottom-copyringht style="margin-bottom: 80px"></bottom-copyringht>
</template>
<style>
.el-input {
	border: none;
}
</style>
<style scoped>
.topTabStyle {
	position: relative;
	height: 65px;
	margin: 20px;
	background: #ffffff;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 15px;
}

.tabStyleChild {
	width: 340px !important;
	height: 65px;
	line-height: 65px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
	margin-left: 40px;
	display: flex;
	justify-content: space-between;
}

.tabSelect {
	text-align: center;
	color: #208eff;
	border-bottom: 2px solid #208eff;
}

.cardContent {
	background: #ffffff;
	margin-top: 20px;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	margin-bottom: 80px;
	height: 600px;
	overflow: auto;
}

.el-form-item {
	margin-bottom: 24px;
}

.cardTabTop {
	height: 66px;
	display: flex;
	margin-left: 25px;
	margin-top: 24px;
	padding-top: 23px;
	justify-content: flex-start;
}

.cardTabTop1 {
	width: 4px;
	height: 14px;
	background: #208eff;
}

.cardTabTop2 {
	/* width: 70px; */
	height: 14px;
	margin-left: 8px;
	font-size: 14px;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
	line-height: 14px;
}

.cardFormStyle {
	width: 440px;
	padding-bottom: 24px;
	margin-left: 115px;
}

.bottomButton {
	position: fixed;
	bottom: 0;
	width: 100%;
	line-height: 60px;
	text-align: center;
	padding-right: 100px;
	height: 60px;

	background-color: #ffffff;
}
</style>
<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 50px;
	height: 50px;
	text-align: center;
}
</style>
